<template>
    <div style="text-align:center">
        <input  v-model="keyWord" type="text" placeholder="请输入要查找的关键字" @change='change'> &nbsp; <router-link to="/set">去存储</router-link><br><br><br>
            <transition name="init">
                <ul init-enter-active v-if="!keyWord">
                <li v-for="(item, index) in arrAll" :key="index">{{index}} : {{item}}</li>
            </ul>
            <div init-leave-active v-else>
        <textarea :value="item" v-for="(item,index) in content" :key="index"  name="" id="" cols="60" disabled rows="3"></textarea>
            </div>
            </transition>
        
    </div>
</template>
<script>
import axios from '../axios/axios'
import{ref,onMounted} from 'vue'
export default {
    setup() {
        let content=ref([])
        let keyWord=ref(null)
        let arrAll=ref([])
        onMounted(()=>{
            axios({
                method:'get',
                url:'/get/all',
            }).then(res=>{
                arrAll.value=res.data
            })
        })
       
        const change=()=>{
            axios({
                method:'get',
                url:'/get',
                params:{key:keyWord.value}
            }).then(res=>{
                content.value=res.data;
            }).catch(err=>{
                console.log(err)
            })
        }
        return{
            keyWord,change,content,arrAll
        }
        
    }
}
</script>
<style lang="less" scoped>
.init-enter-active{
transition: all 1s;
background-color: red;
}
.init-leave-active{
    transition: all 5s;
    background-color: aqua;
}
</style>

